<template>
  <div class="app">
    <van-nav-bar title="选择地址" fixed placeholder left-arrow @click-left="GOback" :border="false" />

    <footer class="add_icon_footer" @click="$router.push('/user/info/address/add')">
      <van-icon name="add-o" color="#3190e8" size="24" />
      <span>新增收货地址</span>
    </footer>
    <ul class="deliverable_address">
      <li v-for="(item,index) in $store.state.ShippingAddress" :key="index">
        <svg :class="IDindex==index?' icon1':'' " aria-hidden="true" @click="check(index,item.id)">
          <use xlink:href="#icon-selectfill"></use>
        </svg>
        <div>
          <header>
            <span>{{item.name}} </span>
            <span>先生 </span>
            <span>{{item.phone}}</span>
          </header>
          <div class="address_detail ellipsis">
            <span style="background-color: rgb(49, 144, 232);">{{item.tag}}</span>
            <p>{{item.address_detail}}</p>
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      IDindex: 0
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    check(index, id) {
      this.IDindex = index
      const obj = {
        index,
        id
      }
      this.$store.commit('ChangeIndex', obj)
      this.GOback()
    }
  },
  mounted() {
    this.$store.dispatch('getAddress', window.sessionStorage.getItem('user_id'))
  }
}
</script>

<style lang="less" scoped>
.add_icon_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 204;
  span {
    font-size: 0.65rem;
    color: #3190e8;
    margin-left: 0.3rem;
  }
}
.deliverable_address {
  li {
    display: flex;
    align-items: center;
    border-bottom: 0.025rem solid #f5f5f5;
    padding: 0.7rem;
    line-height: 1rem;

    div {
      header {
        font-size: 0.65rem;
        color: #333;
        span:first-of-type {
          font-size: 0.75rem;
          font-weight: 700;
        }
      }
    }
    .address_detail {
      width: 100%;
      display: flex;
      align-items: center;
      span {
        color: #fff;
        border-radius: 0.15rem;
        height: 0.6rem;
        line-height: 0.6rem;
        padding: 0 0.2rem;
        margin-right: 0.3rem;
      }
      p {
        font-size: 0.55rem;
        color: #777;
      }
    }
  }
}
.deliverable_address li svg {
  color: #ccc;
  margin: 0;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon1 {
  fill: #4cd964 !important;
}
</style>